<template>
  <view class="topic">
    <ul class="list">
      <li v-for="(item, index) in topicList" :key="index" @click="topicDetail(item.id)">
        <view class="t-img">
          <image :src="item.scene_pic_url" alt="">
        </view>
        <view class="info">
          <view>{{item.title}}</view>
          <view>{{item.subtitle}}</view>
          <view>{{item.price_info}}元起</view>
        </view>
      </li>
    </ul>
  </view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				topicList: [],
				total: ''
			}
		},
		onLoad() {
			this.getListData(true)
		},
		onPullDownRefresh() {
			this.page = 1
			this.getListData()
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			this.page = this.page + 1
			if(this.page > this.total){
				return false
			}
			this.getListData()
		},
		methods: {
			topicDetail(id){
				uni.navigateTo({
					url:'/pages/topicdetail/topicdetail?id=' + id
				})
			},
			async getListData (first) {
			  const data = await this.$request({
					url:'/topic/listaction',
					data:{
						page:this.page
					}
				})
			  this.total = data.data.total
				if(first){
					this.topicList = data.data.data
				}else{
					this.topicList = this.topicList.concat(data.data.data)
				}
			}
		}
	}
</script>

<style lang="scss">
.topic {
  .list {
    li {
      background: #fff;
      text-align: center;
      padding-bottom: 20rpx;
      margin-bottom: 20rpx;
      .t-img {
        width: 100%;
        height: 415rpx;
        image {
          width: 100%;
          height: 100%;
        }
      }
      .info {
        view:nth-child(1) {
          color: #333;
          font-size: 35rpx;
          margin-top: 30rpx;
        }
        view:nth-child(2) {
          color: #999;
          font-size: 24rpx;
          margin-top: 16rpx;
          padding: 0 20rpx;
        }
        view:nth-child(3) {
          color: #b4282d;
          font-size: 27rpx;
          margin-top: 20rpx;
        }
      }
    }
  }
}
</style>
